import { defineComponent, ref } from 'vue'
import {
  NButton,
  NDataTable,
  NIcon,
  NInput,
  NPagination,
  NRadioButton,
  NRadioGroup,
  NSpace
} from 'naive-ui'
import { useColumns } from './use-columns'
import { useTablePrivilege } from './use-table-privilege'
import Card from '@/components/card'
import SearchOutlined from '@vicons/antd/es/SearchOutlined'
import styles from './index.module.scss'
import PrivilegeApplyModal from '@/views/data-manage/dialog/data-catalog/privilege-apply-modal'
import ModProPrivilegeModal from '@/views/data-manage/dialog/data-catalog/mod-pro-privilege-modal'
import ModUserPrivilegeModal from '@/views/data-manage/dialog/data-catalog/mod-user-privilege-modal'
import GrantProPrivilegeModal from '@/views/data-manage/dialog/data-catalog/grant-pro-privilege-modal'

const TablePrivilegeTab = defineComponent({
  name: 'TablePrivilegeTab',
  props: {
    datasourceId: {
      type: Number,
      required: true
    },
    dbName: {
      type: String,
      required: true
    },
    tableName: {
      type: String,
      required: true
    },
    tableId: {
      type: Number,
      required: true
    }
  },
  setup() {
    const privilegeShowRef = ref(true)
    const privilegeApplyModalShowRef = ref(false)
    const grantProPrivilegeModalShowRef = ref(false)

    const {
      state,
      getUserPrivilege,
      getProPrivilege,
      changePage,
      changePageSize,
      onOperationClick
    } = useTablePrivilege()
    const { userPrivilegeColumnsRef, proPrivilegeColumnsRef } =
      useColumns(onOperationClick)

    return {
      privilegeShowRef,
      privilegeApplyModalShowRef,
      grantProPrivilegeModalShowRef,
      state,
      getUserPrivilege,
      getProPrivilege,
      changePage,
      changePageSize,
      userPrivilegeColumnsRef,
      proPrivilegeColumnsRef
    }
  },
  async created() {
    this.state.datasourceId = this.datasourceId
    this.state.dbName = this.dbName
    this.state.tableName = this.tableName
    await this.getUserPrivilege()
    await this.getProPrivilege()
  },
  methods: {
    handlePrivilegeApplyModalShowChange() {
      this.privilegeApplyModalShowRef = !this.privilegeApplyModalShowRef
    },
    handleGrantProPrivilegeModalShowChange() {
      this.grantProPrivilegeModalShowRef = !this.grantProPrivilegeModalShowRef
    },
    onProPrivilegeList() {
      this.getProPrivilege()
    },
    onUserPrivilegeList() {
      this.getUserPrivilege()
    }
  },
  render() {
    return (
      <div class={styles.container}>
        <NSpace vertical>
          <div>
            <Card>
              <NSpace justify='space-between'>
                <NRadioGroup v-model:value={this.privilegeShowRef}>
                  <NRadioButton
                    value={true}
                    label={window.$t('dataManage.userPrivilege')}
                  ></NRadioButton>
                  <NRadioButton
                    value={false}
                    label={window.$t('dataManage.proPrivilege')}
                  ></NRadioButton>
                </NRadioGroup>
                <NButton
                  onClick={() => {
                    this.privilegeApplyModalShowRef = true
                  }}
                  type='info'
                  size='medium'
                >
                  {window.$t('dataManage.privilegeApply')}
                </NButton>
              </NSpace>
            </Card>
          </div>
          <div>
            <div v-show={this.privilegeShowRef}>
              <Card>
                <NSpace vertical>
                  <NDataTable
                    row-class-name='items'
                    columns={this.userPrivilegeColumnsRef.userPrivilegeColumns}
                    size='small'
                    data={this.state.userPrivilegeList}
                    loading={this.state.loading}
                    scrollX={this.userPrivilegeColumnsRef.tableWidth}
                  />
                </NSpace>
              </Card>
            </div>
            <div v-show={!this.privilegeShowRef}>
              <Card>
                <NSpace justify='space-between'>
                  <NButton
                    onClick={() => {
                      this.grantProPrivilegeModalShowRef = true
                    }}
                    type='info'
                    size='small'
                  >
                    {window.$t('dataManage.grantProPrivilege')}
                  </NButton>
                  <NSpace>
                    <NInput
                      v-model:value={this.state.proName}
                      clearable
                      size='small'
                      placeholder={window.$t('project.name')}
                      style='width: 140px'
                    />
                    <NButton
                      type='info'
                      size='small'
                      onClick={this.onProPrivilegeList}
                    >
                      <NIcon>
                        <SearchOutlined />
                      </NIcon>
                    </NButton>
                  </NSpace>
                </NSpace>
              </Card>
              <Card>
                <NSpace vertical>
                  <NDataTable
                    row-class-name='items'
                    columns={this.proPrivilegeColumnsRef.proPrivilegeColumns}
                    size='small'
                    data={this.state.proPrivilegeList}
                    loading={this.state.loading}
                    scrollX={this.proPrivilegeColumnsRef.tableWidth}
                  />
                  <NSpace justify='end'>
                    <NPagination
                      v-model:page={this.state.page}
                      v-model:page-size={this.state.limit}
                      item-count={this.state.count}
                      show-size-picker
                      page-sizes={[10, 30, 50]}
                      show-quick-jumper
                      on-update:page={this.changePage}
                      on-update:page-size={this.changePageSize}
                    />
                  </NSpace>
                </NSpace>
              </Card>
            </div>
          </div>
        </NSpace>
        <PrivilegeApplyModal
          showModal={this.privilegeApplyModalShowRef}
          onModalShowChange={this.handlePrivilegeApplyModalShowChange}
          datasourceId={this.datasourceId}
          dbName={this.dbName}
          tableName={this.tableName}
        ></PrivilegeApplyModal>
        <ModUserPrivilegeModal
          showModal={this.state.modUserPrivilegeModalShow}
          onModalShowChange={() => {
            this.state.modUserPrivilegeModalShow = false
          }}
          onRefreshList={this.onUserPrivilegeList}
          userId={this.state.currentRecord.userId}
          tableId={this.tableId}
          privileges={this.state.currentRecord.privilege}
        ></ModUserPrivilegeModal>
        <ModProPrivilegeModal
          showModal={this.state.modProPrivilegeModalShow}
          onModalShowChange={() => {
            this.state.modProPrivilegeModalShow = false
          }}
          onRefreshList={this.onProPrivilegeList}
          proId={this.state.currentRecord.proId}
          tableId={this.tableId}
          privileges={this.state.currentRecord.privilege}
        ></ModProPrivilegeModal>
        <GrantProPrivilegeModal
          showModal={this.grantProPrivilegeModalShowRef}
          onModalShowChange={this.handleGrantProPrivilegeModalShowChange}
          onRefreshList={this.onProPrivilegeList}
          tableId={this.tableId}
        ></GrantProPrivilegeModal>
      </div>
    )
  }
})

export default TablePrivilegeTab
